<!-- 入炉记录 -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { EditPen, Refresh } from '@element-plus/icons-vue'
import { ElMessage,ElLoading, ElMessageBox, type FormInstance } from 'element-plus'
import { RouterLink } from 'vue-router';

//table设置
const tableHeight = ref(0)
const listTableData = ref([])

// 定义表格数据的类型
interface TableRow {
    id: number;
    time: string;
    name: string;
    name1: string;
}

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
    // 更新选中项 ID 列表
    selectedRowIds.value = new Set(selection.map((item) => item.id));
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
    return selectedRowIds.value.has(row.id) ? 'selected-row' : '';
};


const tableDialogVisible = ref(false)
function clickTableDialog() {
    tableDialogVisible.value = false
    ElMessage({
        message: '已修改，数据已更新',
        type: 'success',
    })
    //ElMessage.error('修改失败，请重新提交')
}


// 新增
const addDialogVisible = ref(false)

const addForm = ref({
    "furnaceCode": "",
    "positionCode": "",
    "furnaceWeight": "",
    "outcqId": "",
    "inFtId": "",
    "incqId":"",
    "inStartTime": "",
    "inEndTime": "",
    "bunkerId": "",
    "faId": "",
    "outFtId": "",
    "getStartTime": "",
    "getEndTime": "",
    "qualityCode":"",
})
const ruleFormRef = ref<FormInstance>()

const rulesForm = ref<any>({
    furnaceCode: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    positionCode: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    furnaceWeight: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    outcqId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    inFtId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    incqId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    inStartTime: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    inEndTime: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    bunkerId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    faId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    outFtId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    getStartTime: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    getEndTime: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    qualityCode: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
})

//详情
const infoDialogVisible = ref(false)

// 时间下拉框
const shortcuts = [
    {
        text: '近3天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            return [start, end]
        },
    },
    {
        text: '近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },

]

import { FurnaceInRecordList, DictDataType, FurnaceMsgListByDicCode, AllFuelTypeList, GetAllBunkerData, AreaByBunkerId, addFurnaceInRecord, FurnaceInRecordInfo,FurnaceInRecordDetail,delFurnaceInRecord,AllFurnaceCoalQuality, AllFactoryCoalQuality } from "@/api";

// 锅炉-下拉框数据
const bunkerNameData = ref<any>([])
const getDictDataType = () => {
    DictDataType('boiler_info').then(res=>{
        console.log('字典----',res.data)
        bunkerNameData.value = res.data
    })
}
const changeFurnaceCode = () => {
    searchForm.value.PositionCode = null
    getFurnaceMsgListByDicCode(searchForm.value.FurnaceCode)
}

// 锅炉位置-下拉框数据
const FurnaceByDicCodeData = ref<any>([])
const getFurnaceMsgListByDicCode = (code:any) => {
    FurnaceMsgListByDicCode(code).then(res=>{
        console.log('字典----入炉位置',res.data)
        FurnaceByDicCodeData.value = res.data
    })
}

// 煤炭种类-下拉框数据
const FuelTypeData = ref<any>([])
const getAllFuelTypeList = () => {
    AllFuelTypeList().then(res=>{
        console.log('字典----煤炭种类',res.data)
        FuelTypeData.value = res.data
    })
}

// 取煤方向-下拉框数据
const BunkerData = ref<any>([])
const AllBunkerData = () => {
    GetAllBunkerData().then(res=>{
        console.log('字典----取煤方向',res.data)
        BunkerData.value = res.data
    })
}

// 取煤区域-下拉框数据
const AreaBunkerData = ref<any>([])
const getAreaByBunkerId = (id:any) => {
    AreaByBunkerId(id).then(res=>{
        console.log('字典----取煤区域',res.data)
        AreaBunkerData.value = res.data
    })
}
const changeBunkerId = () => {
    searchForm.value.FaId = null
    getAreaByBunkerId(searchForm.value.BunkerId)
}


//
const changeFurnaceCodeAddForm = () => {
    addForm.value.positionCode = ''
    getFurnaceMsgListByDicCode(addForm.value.furnaceCode)
}
const changeBunkerIdAddForm = () => {
    addForm.value.faId = ''
    getAreaByBunkerId(addForm.value.bunkerId)
}

// 入炉煤质分类-下拉框数据
const coalCategoryData = ref<any>([])
const getcoalCategoryData = () => {
    AllFurnaceCoalQuality().then(res=>{
        console.log('字典----入炉煤质',res.data)
        coalCategoryData.value = res.data
    })
}

// 取煤煤质分类-下拉框数据
const CoalQualityData = ref<any>([])
const getAllFactoryCoalQuality = () => {
    AllFactoryCoalQuality().then(res=>{
        console.log('字典----入炉煤质',res.data)
        CoalQualityData.value = res.data
    })
}

// 搜索
const searchForm = ref({
    FurnaceCode: "", //锅炉编码
    PositionCode: null, //入炉位置(原煤仓编码)
    BeginInStartTime: null, //入炉开始时间
    EndInStartTime: null, //入炉结束时间
    OutFtId: null, //取煤煤种id
    BunkerId: null, //取煤方向
    FaId: null, //取煤区域

    searchFormTime: [],
    PageNum: 1, //当前页码
    PageSize: 10 //PageSize
})
function changeSearchTime(e: any) {
    searchForm.value.BeginInStartTime = e[0]
    searchForm.value.EndInStartTime = e[1]
    //console.log(searchForm)
}
const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    searchForm.value.BeginInStartTime = null
    searchForm.value.EndInStartTime = null
    formEl.resetFields()
    getFurnaceInRecordList()
}

const totalPage = ref(0)

// list
function getFurnaceInRecordList(){
    FurnaceInRecordList(searchForm.value).then(res => {
        console.log(res)
        listTableData.value = res.data.result
        totalPage.value =  res.data.totalNum
    })
}

// 表单验证
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            clickAddFurnaceInRecord()
        } else {
            console.log('error submit!', fields)
        }
    })
}

//新增
const clickAddFurnaceInRecord = () => {
    console.log(addForm.value)
    addFurnaceInRecord(addForm.value).then(res=>{
        console.log('新增----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            addDialogVisible.value = false
            getFurnaceInRecordList()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

const addDialog = () =>{
    //resetAddForm(ruleFormRef.value)
    addForm.value = {
        "furnaceCode": "",
        "positionCode": "",
        "furnaceWeight": "",
        "outcqId": "",
        "inFtId": "",
        "incqId":"",
        "inStartTime": "",
        "inEndTime": "",
        "bunkerId": "",
        "faId": "",
        "outFtId": "",
        "getStartTime": "",
        "getEndTime": "",
        "qualityCode":"",
    }
    addDialogVisible.value = true
}

//详情
const infoData = ref<any>({})
const infoFurnaceByDicCodeData = ref<any>([])
function getFurnaceInRecordInfo(id:number){
    FurnaceInRecordDetail(id).then(res => {
        console.log('详情-------',res)
        infoData.value = res.data
        infoDialogVisible.value = true 
        
        FurnaceMsgListByDicCode(infoData.value.furnaceCode).then(res=>{
            console.log('字典----入炉位置',res.data)
            infoFurnaceByDicCodeData.value = res.data
        })
    })
}

// 删除
const clickDelete = (ids:string) => {
    ElMessageBox.confirm(
        '是否确定删除，删除后不能恢复?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
    .then(() => {
        delFurnaceInRecord(ids).then(res=>{
            console.log('删除----',res)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getFurnaceInRecordList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    })
}

// 批量删除
const batchDel = () => {
    if(selectedRowIds.value.size == 0){
        ElMessage.error('请先选择要批量删除的数据')
    }
    else{
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        let ids: string = Array.from(selectedRowIds.value).join(', ');
        delFurnaceInRecord(ids).then(res=>{
            console.log('删除----',res)
            loading.close()
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getFurnaceInRecordList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    }
}

const resetAddForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
    getDictDataType()
    AllBunkerData()
    getcoalCategoryData()
    getAllFactoryCoalQuality()
    getAllFuelTypeList()
    getFurnaceInRecordList()
});
</script>
<template>
    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" title="新增入炉记录" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form ref="ruleFormRef" :inline="true" :model="addForm" :rules="rulesForm" class="mt15 form-inline-row-two" label-width="110" >
                <div class="form_title">入炉信息</div>
                <el-form-item label="入炉名称:" prop="furnaceCode">
                    <el-select v-model="addForm.furnaceCode" placeholder="请选择"  @change="changeFurnaceCodeAddForm">
                        <el-option v-for="item in bunkerNameData" :label="item.dictLabel" :value="item.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="入炉位置:"  prop="positionCode">
                    <el-select v-model="addForm.positionCode" placeholder="请选择">
                        <el-option v-for="item in FurnaceByDicCodeData" :label="item.furnaceName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="入炉重量:"  prop="furnaceWeight">
                    <el-input v-model="addForm.furnaceWeight" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="入炉煤质:"  prop="outcqId">
                    <el-select v-model="addForm.outcqId" placeholder="请选择" >
                        <el-option v-for="item in coalCategoryData" :label="item.sampleName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="入炉煤种:"  prop="inFtId">
                    <el-select v-model="addForm.inFtId" placeholder="请选择" >
                        <el-option v-for="item in FuelTypeData" :label="item.ftName" :value="item.ftId" />
                    </el-select>
                </el-form-item>
                <el-form-item ></el-form-item>
                <el-form-item label="入炉开始时间:"  prop="inStartTime">
                    <el-date-picker
                        v-model="addForm.inStartTime"
                        type="datetime"
                        placeholder="请选择"
                        format="YYYY-MM-DD hh:mm:ss"
                        value-format="YYYY-MM-DD hh:mm:ss"
                    />
                </el-form-item>
                <el-form-item label="入炉结束时间:"  prop="inEndTime">
                    <el-date-picker
                        v-model="addForm.inEndTime"
                        type="datetime"
                        placeholder="请选择"
                        format="YYYY-MM-DD hh:mm:ss"
                        value-format="YYYY-MM-DD hh:mm:ss"
                    />
                </el-form-item>

                <div class="form_title">取煤信息</div>

                <el-form-item label="取煤煤场:" prop="bunkerId">
                    <el-select v-model="addForm.bunkerId" placeholder="请选择" @change="changeBunkerIdAddForm">
                        <el-option v-for="item in BunkerData" :label="item.bunkerName" :value="item.bunkerId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="取煤区域:" prop="faId">
                    <el-select v-model="addForm.faId" placeholder="请选择" >
                        <el-option v-for="item in AreaBunkerData" :label="item.areaName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="取煤煤种:" prop="outFtId">
                    <el-select v-model="addForm.outFtId" placeholder="请选择" >
                        <el-option v-for="item in FuelTypeData" :label="item.ftName" :value="item.ftId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="取煤煤质:" prop="incqId">
                    <el-select v-model="addForm.incqId" placeholder="请选择" >
                        <el-option v-for="item in coalCategoryData" :label="item.sampleName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="品名/编码:">
                    <el-input v-model="addForm.qualityCode" placeholder="请输入" />
                </el-form-item> -->
                <el-form-item label="取煤开始时间:" prop="getStartTime">
                    <el-date-picker
                        v-model="addForm.getStartTime"
                        type="datetime"
                        placeholder="请选择"
                        format="YYYY-MM-DD hh:mm:ss"
                        value-format="YYYY-MM-DD hh:mm:ss"
                    />
                </el-form-item>
                <el-form-item label="取煤结束时间:" prop="getEndTime">
                    <el-date-picker
                        v-model="addForm.getEndTime"
                        type="datetime"
                        placeholder="请选择"
                        format="YYYY-MM-DD hh:mm:ss"
                        value-format="YYYY-MM-DD hh:mm:ss"
                    />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/详情 -->
    <el-dialog v-model="infoDialogVisible" title="查看入炉记录详情" width="1400" :align-center="true">
        <div class="dialog_main">
            <div class="form_title mt15">入炉信息</div>
            <div class="table_info small">
                <table>
                    <tr>
                        <th>入炉名称</th>
                        <th>入炉位置</th>
                        <th>入炉重量</th>
                        <th>入炉煤质</th>
                        <th>入炉煤种</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>耗时</th>
                    </tr>
                    <tr>
                        <td>
                            <span v-for="item in bunkerNameData">
                                <span v-if="infoData.furnaceCode == item.dictValue">{{ item.dictLabel }}</span>
                            </span>
                        </td>
                        <td>
                            <span v-for="item in infoFurnaceByDicCodeData">
                                <span v-if="infoData.positionCode == item.id">{{ item.furnaceName }}</span>
                            </span>
                        </td>
                        <td>{{ infoData.furnaceWeight }}</td>
                        <td>
                            <span v-for="item in coalCategoryData">
                                <span v-if="infoData.outcqId == item.id">{{ item.sampleName }}</span>
                            </span>
                        </td>
                        <td>
                            <span v-for="item in FuelTypeData">
                                <span v-if="infoData.inFtId == item.ftId">{{ item.ftName }}</span>
                            </span>
                        </td>
                        
                        <td>{{ infoData.inStartTime }}</td>
                        <td>{{ infoData.inEndTime }}</td>
                        <td>{{ infoData.inElapsed }}</td>
                    </tr>
                </table>
            </div>
            <div class="form_title mt15">取煤信息</div>
            <div class="table_info small">
                <table>
                    <tr>
                        <th>取煤方向</th>
                        <th>取煤区域</th>
                        <th>取煤煤种</th>
                        <th>品名/编码</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>耗时</th>
                    </tr>
                    <tr>
                        <td>
                            <!-- <span v-for="item in BunkerData">
                                <span v-if="infoData.bunkerId == item.bunkerId">{{ item.bunkerName }}</span>
                            </span> -->
                            {{ infoData.bunkerName }}
                        </td>
                        <td>
                            {{ infoData.areaName }}
                        </td>
                        <td>
                            {{ infoData.outFtName }}
                            <!-- <span v-for="item in FuelTypeData">
                                <span v-if="infoData.outFtId == item.ftId">{{ item.ftName }}</span>
                            </span> -->
                        </td>
                        <td>{{ infoData.qualityCode }}</td>
                        <td>{{ infoData.getStartTime }}</td>
                        <td>{{ infoData.getEndTime }}</td>
                        <td>{{ infoData.outElapsed }}</td>
                    </tr>
                </table>
            </div>
        </div>
        
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog v-model="tableDialogVisible" width="400" :align-center="true" center>
        <div class="table_dialog">
            <img src="../../assets/img/ico_5.png" alt="">
            <strong>您确定要保存修改内容吗？</strong>
            <span>
                修改内容保存后不可撤回，且会覆盖之前数据
            </span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="tableDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="clickTableDialog">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- search -->
    <div class="search_bor_bg">
        <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="from_search_inline" label-width="75">
            <el-form-item label="入炉名称:" prop="FurnaceCode">
                <el-select v-model="searchForm.FurnaceCode" placeholder="请选择" @change="changeFurnaceCode"  style="width: 130px;">
                    <el-option v-for="item in bunkerNameData" :label="item.dictLabel" :value="item.dictValue" />
                </el-select>
            </el-form-item>
            <el-form-item label="入炉位置:" prop="PositionCode">
                <el-select v-model="searchForm.PositionCode" placeholder="请选择" style="width: 100px;">
                    <el-option v-for="item in FurnaceByDicCodeData" :label="item.furnaceName" :value="item.id" />
                </el-select>
            </el-form-item>
            
            <el-form-item label="入炉时间:" prop="searchFormTime">
                <el-date-picker style="width: 240px;" v-model="searchForm.searchFormTime" 
                type="daterange" 
                value-format="YYYY-MM-DD" 
                :shortcuts="shortcuts" 
                unlink-panels 
                start-placeholder="开始时间"
                end-placeholder="结束时间" 
                @change="changeSearchTime" />
            </el-form-item>
            <el-form-item label="取煤煤种:" prop="OutFtId" >
                <el-select v-model="searchForm.OutFtId" placeholder="请选择" style="width: 100px;">
                    <el-option v-for="item in FuelTypeData" :label="item.ftName" :value="item.ftId" />
                </el-select>
            </el-form-item>
            <el-form-item label="取煤方向:" prop="BunkerId">
                <el-select v-model="searchForm.BunkerId" placeholder="请选择" @change="changeBunkerId" style="width: 100px;">
                    <el-option v-for="item in BunkerData" :label="item.bunkerName" :value="item.bunkerId" />
                </el-select>
            </el-form-item>
            <el-form-item label="取煤区域:" prop="FaId">
                <el-select v-model="searchForm.FaId" placeholder="请选择" style="width: 100px;">
                    <el-option v-for="item in AreaBunkerData" :label="item.areaName" :value="item.fid" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" color="#2565C8" @click="getFurnaceInRecordList">搜索</el-button>
                <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" @click="addDialog(),resetAddForm(ruleFormRef)">新增</el-button>
            <el-button type="primary" color="#2565C8" @click="batchDel">批量删除</el-button>
        </div>
        <div class="table_list mt15">
            <el-table class="custom-table" :data="listTableData" size="large" :border="false" :stripe="false"
                :highlight-current-row="false" :height="tableHeight" style="width: 100%;" :row-class-name="rowClassName"
                ref="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="right" />
                <el-table-column label="入炉名称" prop="positionName" >
                    <template #default="scope">
                        <span v-for="item in bunkerNameData">
                            <span v-if="scope.row.furnaceCode == item.dictValue">{{ item.dictLabel }}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="原煤仓编码" prop="furnaceCode" />
                <el-table-column label="加仓重量" prop="furnaceWeight" />
                <el-table-column label="入炉煤质" prop="outcqId" >
                    <template #default="scope">
                        <span v-for="item in coalCategoryData">
                            <span v-if="scope.row.outcqId == item.dictValue">{{ item.dictLabel }}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="入炉煤种" prop="inFtName" ></el-table-column>
                <el-table-column label="取煤煤场" prop="bunkerName" />
                <el-table-column label="取煤区域" prop="areaName" />
                <el-table-column label="取煤煤种" prop="outFtName" />
                <el-table-column align="center" label="操作" min-width="120">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="clickDelete(scope.row.id)">删除</a>
                            <a href="javascript:;" @click="getFurnaceInRecordInfo(scope.row.id)">查看详情</a>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="searchForm.PageNum" v-model:page-size="searchForm.PageSize" @current-change="getFurnaceInRecordList" :total="totalPage"  background layout="prev, pager, next" />
        </div>

    </div>

</template>
<style scoped lang="scss">
.import_dialog {
    border: 1px solid #eee;
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(48deg, #FCFDFF 0%, #EFF7FD 100%);
    padding-bottom: 20px;

    .steps_win {
        text-align: center;
        height: 350px;
        box-sizing: border-box;
        padding-top: 90px;

        p {
            font-weight: 500;
            font-size: 18px;
            line-height: 30px;
            padding-top: 10px;
        }
    }

    .steps_text {
        height: 350px;
        font-weight: 500;
        font-size: 18px;
        color: #3B4552;
        line-height: 40px;
        box-sizing: border-box;
        padding-top: 70px;
        padding-left: 170px;
    }

    .steps_down {
        width: 100%;
        height: 350px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        padding: 40px 20px;

        .btn_down {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 114px;
            height: 32px;
            line-height: 20px;
            background: #EBF3FF;
            border-radius: 16px 16px 16px 16px;
            border: 1px solid #2565C8;
            font-size: 14px;
            color: #2565C8;
            transition: all 0.2s;

            &:hover {
                background: #C8DFFD;
            }
        }

        p {
            font-weight: 500;
            font-size: 16px;
            color: #3B4552;
            line-height: 32px;
        }

        .down_file {
            width: 110px;
            height: 110px;
            background: #E6EAF0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 48px;
            }
        }
    }

    .steps_title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        li {
            width: 100%;
            color: #fff;
            text-align: center;
            line-height: 52px;
            background: #C8DFFD;
            font-size: 18px;

            &.hover {
                background: #2565C8;
            }
        }
    }
}

::v-deep(.el-table__body-wrapper) {
    background: #F6FAFE !important;
}

::v-deep(.el-table__inner-wrapper:before) {
    display: none; //下边线
}

::v-deep(.el-table thead th) {
    color: #333 !important;
    background: #CCDDF9;
}

::v-deep(.el-table__body) {
    border-spacing: 0px 13px !important;
}

::v-deep(.el-table__row td) {
    border-top: 1px solid #E0E5ED !important;
    border-bottom: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row td:first-child) {
    border-left: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row td:last-child) {
    border-right: 1px solid #E0E5ED !important;
}

::v-deep(.el-table__row:hover td) {
    background: #ecf5ff !important;
}

::v-deep(.el-table__expanded-cell) {
    border: 1px solid #E0E5ED !important;
    padding: 0 !important;
    //border-top: none !important; 
}

// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el-table__expanded-cell:hover) {
    background-color: #ecf5ff !important;
}

::v-deep(.el-table__row.selected-row td) {
    background: #FFDE9A !important;
}
</style>